<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<!-- <view class="uni-title">{{$t('demo.table.title')}}</view> -->
				<el-radio-group v-model="times" aria-label="size control" @change="timeClick">
					<el-radio-button value="d">今天</el-radio-button>
					<el-radio-button value="m">今月</el-radio-button>
					<el-radio-button value="y">今年</el-radio-button>
					<el-radio-button value="null">总共</el-radio-button>
					<el-radio-button disabled :value="other">其他</el-radio-button>
				</el-radio-group>
			</view>
			<view class="uni-group">
				<el-config-provider :locale="locale">
					<el-date-picker v-model="month" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
						range-separator="-" value-format="YYYY/MM/DD" @change="onChange" />
				</el-config-provider>
			</view>
		</view>
		<view class="uni-container">
			<el-card>
				<el-row :gutter="10" style="margin-top: 10px;">
					<el-col :span="6">
						<el-descriptions border :column="1">
							<el-descriptions-item v-for="(item,index) in chartTotal" :key="index"
								:label="item.name+'次数：'">{{item.count}}</el-descriptions-item>
						</el-descriptions>
					</el-col>
					<el-col :span="18">
						<qiun-data-charts type="mount" :opts="opts" :chartData="chartData" />
					</el-col>
				</el-row>
			</el-card>
			<el-row :gutter="10" style="margin-top: 10px;">
				<el-col :span="7">
					<el-descriptions title="AI" border :column="1">
						<el-descriptions-item label="现余额：">{{credits}}</el-descriptions-item>
						<el-descriptions-item label="总消耗">{{total}}</el-descriptions-item>
						<el-descriptions-item label="使用次数：">{{num}}</el-descriptions-item>
						<el-descriptions-item label="消耗中币：">{{total*charge+total*chargeStart}}</el-descriptions-item>
					</el-descriptions>
				</el-col>
				<el-col :span="7">
					<el-descriptions title="AI消耗" border :column="1">
						<el-descriptions-item v-for="(item,index) in dataType"
							:label="item.name">{{item.value}}</el-descriptions-item>
					</el-descriptions>
				</el-col>
				<el-col :span="10"><qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
				</el-col>
			</el-row>
			<el-row :gutter="0" style="margin-top: 10px;">
				<el-col :span="10">
					<el-descriptions title="AI历史" border :column="1">
						<el-descriptions-item v-for="(item,index) in history"
							:label="item.note">{{item.amount}}</el-descriptions-item>
					</el-descriptions>
				</el-col>
				<el-col :span="14"><qiun-data-charts type="pie" :opts="opts2" :chartData="aiHistory" />
				</el-col>
			</el-row>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>


<script>
	import zhTw from 'element-plus/es/locale/lang/zh-tw'
	import zhCn from 'element-plus/es/locale/lang/zh-cn'
	import en from 'element-plus/es/locale/lang/en'
	import {
		addUserBalance,
		updateUserState,
		addUser,
		updateUser,
		getUserList,
		getIncomeAndExpenses,
		getAi,
	} from '@/api/pc';
	import {
		Check,
		Close
	} from '@element-plus/icons-vue'
	// 导出默认模块
	export default {
		// 数据属性
		data() {
			return {
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false,
				// ----------- 统计 ---------
				times: 'd',
				stext: '统计收入和支出',
				chartData: {},
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['mount'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.8
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				// ------- 新 ---------
				dialogTableVisible: false,
				addShow: false,
				balance: 0,
				username: '',
				form: {
					balance: '',
					id: '',
					password: '',
					username: '',
					discount: ''
				},
				data: null,
				credits: 0,
				charge: 1,
				chargeStart: 1,
				total: 0,
				num: 0,
				month: [],
				other: 'sad',
				chartTotal: [],
				history: [],
				aiHistory: [],
				dataType: []
			}
		},
		// 页面加载时的处理函数
		onLoad() {
			// 重置选中项数组
			this.selectedIndexs = []
			// 获取第一页数据
			this.getData(1);
		},
		onReady() {
			this.getServerData();
			this.getAi();
		},
		computed: {
			locale() {
				let zh = uni.getLocale();
				if (zh == 'zh-Hans') {
					return zhCn;
				}
				if (zh == 'zh-Hant') {
					return zhTw;
				}
				if (zh == 'en') {
					return en;
				}
			}
		},
		// 方法
		methods: {
			onChange() {
				this.times = this.other;
				this.getServerData();
			},
			timeClick() {
				this.month = [null, new Date()];
				this.getServerData();
			},
			getAi() {
				getAi({
					times: this.times
				}).then(e => {
					if (e.code == 200) {
						let total = 0;
						let count = 0;
						for (let item of e.data) {
							item.name = this.$taskType(item.name);
							total = item.value + total;
							count = item.count + count;
						}
						this.dataType = e.data
						this.total = total;
						this.num = count;
						this.credits = e.ai.credits;
						this.charge = e.charge;
						this.chargeStart = e.chargeStart;

						let res = {
							series: [{
								data: e.data
							}]
						};
						// console.log(e.data);
						this.chartData2 = JSON.parse(JSON.stringify(res));
						this.history = e.ai.history
						for (let item of e.ai.history) {
							item.name = item.note;
							item.value = item.amount;
						}
						let aiHistory = {
							series: [{
								data: e.ai.history
							}]
						};
						// console.log(e.data);
						this.aiHistory = JSON.parse(JSON.stringify(aiHistory));
					}
				})
			},
			getServerData() {
				getIncomeAndExpenses({
					times: this.times,
					month: this.month
				}).then(e => {
					if (e.code == 200) {
						let res = {
							series: [{
								data: e.data
							}]
						};
						this.chartTotal = e.data;
						this.chartData = JSON.parse(JSON.stringify(res));
					}
				})
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			// 多选事件处理函数
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},

			// 批量删除函数
			delTable() {
				this.selectedItems();
			},

			// 分页触发事件处理函数
			change(e) {
				this.getData(e.current)
			},
			add() {
				this.form.username = '';
				this.form.password = '';
				this.addShow = true;
			},
			edit(e) {
				this.form.id = e._id;
				this.dialogTableVisible = true;
			},
			// 搜索函数
			search() {
				this.getData(1, this.searchVal)
			},
			submit(e) {
				var that = this;
				if (e == 'edit') {
					updateUser(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				} else {
					addUser(this.form).then(res => {
						if (res.code == 200) {
							that.$message.success(res.msg);
							that.getData(this.pageCurrent)
							that.dialogTableVisible = false;
						} else {
							that.$message.error(res.msg);
						}
					})
				}

			},
			updateUserState(e) {
				var that = this;
				// console.log(e, e.state); 
				updateUserState({
					id: e._id,
					state: e.state
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.msg);
						that.getData(this.pageCurrent)
					} else {
						that.$message.error(res.msg);
						e.state = !e.state;
					}
				})
			},
			// 获取数据函数
			getData(pageCurrent, key = "") {
				this.loading = true
				this.pageCurrent = pageCurrent
				getUserList({
					roles: 'admin',
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					key: key,
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					} else {
						this.$message.error(res.msg || '登录失败');
						this.tableData = []
						this.total = 0
						this.loading = false
					}
				})
			},
			// 伪request请求函数
			request(options) {
				console.log(options);
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options

				let total = tableData.length

				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})

				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' && success({
						data: data,
						total: total
					})
				}, 500)
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	.uni-title_num {
		font-weight: bold;
	}

	/* #endif */
</style>